<!DOCTYPE html>
<html lang="cn" translate="no" style="height: 100%">
<head>
    <meta charset="UTF-8" />
    <meta name="google" content="notranslate">
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3d机房</title>

    <style>
        .btns {
            padding: 10px;
            position: absolute;
            bottom: 0px;
            left: 0px;
            z-index: 1;
            pointer-events: none;
        }

        .btns div {
            margin: 4px 0px;
        }

        .btns button {
            pointer-events: all;
        }
    </style>

    <script>
        // 请求例子
        function post() {
            computerRoom3D.post("/g2/api/Permission/IsLegal?license=ghEqzfzRRslqq5cix4Fa9byjbbSKez1fzxXxdsoMpNBAFDUqPvxpUEMdi4Eac1dq")
                .then(res => {
                    console.log("res:" + JSON.stringify(res))
                })
        }

        var cameraParam;

        // 保存相机参数
        function saveCameraParam() {
            cameraParam = computerRoom3D.GetCurrentCamera();
            console.log("saveCameraParam:" + JSON.stringify(cameraParam))
        }

        // 设置相机参数
        function setCameraParam() {
            computerRoom3D.FlytoCamera(cameraParam);
        }
        // 添加机柜
        function add() {
            computerRoom3DStore.setCabinetDatas([]);
            computerRoom3DStore.setCabinetDatas([
                {
                    id: "1",
                    type: "cabinet", // 类型
                    x: 30,  // x坐标
                    y: 1807.626,  // y坐标
                    z: 314,  // z坐标
                    icon: "./房子.png",
                    name: "机柜1",
                    capacity: 0.5,              //容量 0-1
                    capacityColor: "#ffff00",   // 容量颜色
                    theta: 0, // 俯仰角
                    floor: 7, // 所属楼层
                    fbxUrl: "/model/cabinet/U42600X1000X2000.fbx" // 模型地址
                },
                // {
                //     id: "2",
                //     type: "cabinet", // 类型
                //     x: 30,  // x坐标
                //     y: 1807.626,  // y坐标
                //     z: 318,  // z坐标
                //     icon: "./房子_2.png",
                //     name: "机柜1",
                //     capacity: 0.5,              //容量 0-1
                //     capacityColor: "#ffff00",   // 容量颜色
                //     theta: 0, // 俯仰角
                //     floor: 7, // 所属楼层
                //     fbxUrl: "/model/cabinet/U37C_600x1000x1800.fbx" // 模型地址
                // },
                // {
                //     id: "3",
                //     type: "cabinet", // 类型
                //     x: 30,  // x坐标
                //     y: 1807.626,  // y坐标
                //     z: 452,  // z坐标
                //     icon: "./Camera_ball.png",
                //     name: "机柜1",
                //     capacity: 0,              //容量 0-1
                //     capacityColor: "#ffff00",   // 容量颜色
                //     theta: 0, // 俯仰角
                //     floor: 7, // 所属楼层
                //     fbxUrl: "/model/cabinet/U37B.fbx" // 模型地址
                // },
                // {
                //     id: "4",
                //     type: "cabinet", // 类型
                //     x: 30,  // x坐标
                //     y: 1807.626,  // y坐标
                //     z: 646,  // z坐标
                //     icon: "./Camera_ball.png",
                //     name: "机柜1",
                //     capacity: 0.5,              //容量 0-1
                //     capacityColor: "#ffff00",   // 容量颜色
                //     theta: 45, // 俯仰角
                //     floor: 7, // 所属楼层
                //     fbxUrl: "/model/cabinet/U42B.fbx" // 模型地址
                // }
            ]);

            //2.设置需要编辑的 机柜id
            computerRoom3DStore.setEditorCabinetId("1");
        }

        // 删除机柜
        function del() {
            computerRoom3DStore.setCabinetDatas([]);
        }

        //设置机柜的位置
        function setCabinetPosition() {
            const deviceData = computerRoom3DStore.getCabinetDataById("1");
            if (deviceData) {
                computerRoom3DStore.setCabinetDataById("1", { x: deviceData.x + 10 });
            }
        }

        //移动机柜设备位置
        function moveCabinetDevice(unit = 0) {

            const id = computerRoom3DStore.lookCabinetDeviceId;// 当前选中的机柜设备id
            if (id) {
                const cabinetDeviceData = computerRoom3DStore.getCabinetDeviceDataById(id);
                if (cabinetDeviceData) {
                    computerRoom3DStore.setCabinetDeviceDataById(id, { unit: cabinetDeviceData.unit + unit });
                }
            }
        }

        // 设置机柜内的设备
        function setCabinetDeviceDatas() {
            computerRoom3DStore.setCabinetDeviceDatas([
                {
                    id: "1",
                    name: "",
                    type: "device_of_cabinet", // 类型
                    cabinetId: "1",         // 所属机柜的 id
                    unit: 32,               //在机柜内的位置
                    //color: null,
                    fbxUrl: "./model/cabinet/DELL_2950.fbx" // 设备模型
                },
                {
                    id: "2",
                    name: "",
                    type: "device_of_cabinet", // 类型
                    cabinetId: "1",         // 所属机柜的 id
                    unit: 15,               //在机柜内的位置
                    fbxUrl: "./model/cabinet/DELL_2950.FBX" // 设备模型
                },
                // {
                //     id: "3",
                //     name: "",
                //     type: "device_of_cabinet", // 类型
                //     cabinetId: "2",         // 所属机柜的 id
                //     unit: 37,
                //     color: "#420420",
                //     fbxUrl: "./model/cabinet/Cube1U.FBX" // 设备模型
                // },
                // {
                //     id: "4",
                //     name: "",
                //     type: "device_of_cabinet", // 类型
                //     cabinetId: "2",         // 所属机柜的 id
                //     unit: 36,               //在机柜内的位置
                //     color:"#00ced1",
                //     fbxUrl: "./model/cabinet/Cube1U.FBX" // 设备模型
                // }
                // {
                //     id: "2",
                //     name: "",
                //     type: "device_of_cabinet", // 类型
                //     cabinetId: "2",         // 所属机柜的 id
                //     unit: 4,               //在机柜内的位置
                //     fbxUrl: "/model/cabinet/qzscjhj.fbx" // 设备模型
                // },
                // {
                //     cabinetId: "3",
                //     fbxUrl: "/model/cabinet/qzblj.fbx",
                //     id: "13",
                //     name: "7层机柜A2齐治堡垒机3",
                //     type: "device_of_cabinet",
                //     unit: 16
                // },
                // {
                //     cabinetId: "4",
                //     fbxUrl: "/model/cabinet/qzblj.fbx",
                //     id: "14",
                //     name: "7层机柜A2齐治堡垒机3",
                //     type: "device_of_cabinet",
                //     unit: 16
                // },
                // {
                //     id: "3",
                //     name: "",
                //     type: "device_of_cabinet", // 类型
                //     cabinetId: "1",         // 所属机柜的 id
                //     unit: 7,               //在机柜内的位置
                //     fbxUrl: "/model/cabinet/AF1580.fbx" // 设备模型
                // },
                // {
                //     id: "4",
                //     name: "",
                //     type: "device_of_cabinet", // 类型
                //     cabinetId: "1",         // 所属机柜的 id
                //     unit: 10,               //在机柜内的位置
                //     fbxUrl: "/model/cabinet/WAFQ.fbx" // 设备模型
                // },
                // {
                //     id: "5",
                //     name: "",
                //     type: "device_of_cabinet", // 类型
                //     cabinetId: "1",         // 所属机柜的 id
                //     unit: 13,               //在机柜内的位置
                //     fbxUrl: "/model/cabinet/dr_r710.fbx" // 设备模型
                // },
                // {
                //     id: "6",
                //     name: "",
                //     type: "device_of_cabinet", // 类型
                //     cabinetId: "1",         // 所属机柜的 id
                //     unit: 16,               //在机柜内的位置
                //     fbxUrl: "/model/cabinet/AF1580.fbx" // 设备模型
                // },
                // {
                //     id: "7",
                //     name: "",
                //     type: "device_of_cabinet", // 类型
                //     cabinetId: "1",         // 所属机柜的 id
                //     unit: 19,               //在机柜内的位置
                //     fbxUrl: "/model/cabinet/ACE390.fbx" // 设备模型
                // },
                // {
                //     id: "8",
                //     name: "",
                //     type: "device_of_cabinet", // 类型
                //     cabinetId: "1",         // 所属机柜的 id
                //     unit: 23,               //在机柜内的位置
                //     fbxUrl: "/model/cabinet/DMZjhj.fbx" // 设备模型
                // }
            ]);
        }

        // 添加温度计传感器
        function addTemperature() {

            computerRoom3DStore.setTemperatureDatas([
                {
                    id: "1",
                    name: "",
                    x: 0,  // x坐标
                    y: 0,  // y坐标
                    z: 0,  // z坐标
                    topValue: 80, // 红色最小值
                    value: 70, // 温度计的值
                    downValue: 50,// 绿色最大值
                    type: "temperature", // 类型
                    floor: 7, // 所属楼层
                }
            ]);

            //2.设置需要编辑的 机柜id
            computerRoom3DStore.setEditorTemperatureId("1");

        }

        // 移动指定温度传感器
        function moveTemperature(id, x = 0) {
            if (id) {
                const temperatureData = computerRoom3DStore.getTemperatureDataById(id);
                if (temperatureData) {
                    computerRoom3DStore.setTemperatureDataById(id, { x: temperatureData.x + x, z: temperatureData.z + x });
                }
            }
        }


        //设置其他设备的数据
        function addOtherDevices() {
            computerRoom3DStore.setOtherDeviceDatas([
                {
                    id: "10",  // id
                    name: "空调", // 备用字段
                    type: "other_device",// 类型
                    fbxUrl: "./upsdczu.fbx", // 模型地址
                    x: 0,  // x坐标
                    y: 0,  // y坐标
                    z: 0,  // z坐标
                    theta: 0, // 方位角
                    phi: 0, // 俯仰角
                    pitch: 0, // 倾斜角
                    floor: 1, // 所属楼层
                }
            ]);

            computerRoom3DStore.setEditorOtherDeviceId("10");
        }

        // 移动其他设备的位置
        function moveOtherDevices(id, x = 0) {
            if (id) {
                const otherDevice = computerRoom3DStore.getOtherDeviceDataById(id);
                if (otherDevice) {
                    computerRoom3DStore.setOtherDeviceDataById(id, { x: otherDevice.x + x });
                }
            }
        }

        // 设置端口线数据连接
        function setPortLineData() {
            computerRoom3DStore.setPortLineData({
                startDeviceOfCabinetId: "1_1", // 起始设备id
                startDeviceOfCabinetPort: 1,   // 起始设备端口号
                endDeviceOfCabinetId: "2_2",   // 结束设备id
                endDeviceOfCabinetPort: 1,      // 结束设备端口号
                portLineColor: `#57D0F4`, // 线条颜色
                animationTime: 5000, //  动画 时间
            })
        }

        // 取消端口线
        function removeProtLineData() {
            computerRoom3DStore.setPortLineData({
                startDeviceOfCabinetId: "", // 起始设备id
                startDeviceOfCabinetPort: 0,   // 起始设备端口号
                endDeviceOfCabinetId: "",   // 结束设备id
                endDeviceOfCabinetPort: 0      // 结束设备端口号
            })
        }

        //添加文本弹窗
        function addTextModal() {

            computerRoom3DStore.setTextModalDatas([
                {
                    id: "1",  // id
                    name: "", // 备用字段
                    x: 0,  // x坐标
                    y: 0,  // y坐标
                    z: 0,  // z坐标
                    title: "标题", // 标题
                    texts: [
                        { text: "字段:值1111", color: "#00ff00", size: 80 },
                        { text: "字段:值1111", color: "#00ff00", size: 80 }
                    ],
                    type: "textModal", // 类型
                    floor: 0, // 所属楼层
                }
            ]);

            computerRoom3DStore.setEditorTextModalId("1");
        }

        //移动文本弹窗
        function moveTextModal(id, x = 0) {
            if (id) {
                const textModalData = computerRoom3DStore.getTextModalDataById(id);
                if (textModalData) {
                    computerRoom3DStore.setTextModalDataById(id, { x: textModalData.x + x });
                }
            }
        }

        //添加告警点
        function addAlarmPoint() {

            computerRoom3DStore.setAlarmPointDatas([
                {
                    id: "1",  // id
                    name: "千兆三层交换机1", // 备用字段
                    alarmType: "yellow",// 类型 red/green/yellow
                    x: 676.8,  // x坐标
                    y: 2008,  // y坐标
                    z: 550,  // z坐标
                    floor: 7, // 所属楼层x
                },
                {
                    id: "2",  // id
                    name: "千兆三层交换机2", // 备用字段
                    alarmType: "red",// 类型 red/green/yellow
                    x: 676.8 + 80,  // x坐标
                    y: 2008,  // y坐标
                    z: 550,  // z坐标
                    floor: 7, // 所属楼层x
                },
                {
                    id: "3",  // id
                    name: "千兆三层交换机3", // 备用字段
                    alarmType: "green",// 类型 red/green/yellow
                    x: 676.8 + 150,  // x坐标
                    y: 2008,  // y坐标
                    z: 550,  // z坐标
                    floor: 7, // 所属楼层x
                }
            ]);

            //computerRoom3DStore.setEditorAlarmPointId("1");
        }

        //移动告警点
        function moveAlarmPoint(id, x = 0) {
            if (id) {
                const alarmPointData = computerRoom3DStore.getAlarmPointDataById(id);
                if (alarmPointData) {
                    computerRoom3DStore.setAlarmPointDataById(id, { x: alarmPointData.x + x });
                }
            }
        }

        // 添加文本标签数据
        function addLabel() {

            computerRoom3DStore.setLabelDatas([
                {
                    id: "1",  // id
                    name: "1号机柜1号机柜1号机柜", // 备用字段
                    type: "cabinet", // 类型
                    x: 0,  // x坐标
                    y: 0,  // y坐标
                    z: 0,  // z坐标
                    icon: "./Camera_ball.png", // 图标
                    textContainer: "./Camera_ball_TextContainer.png", // 标签文本
                    floor: 0, // 所属楼层
                }
            ]);

            computerRoom3DStore.setEditorLabelId("1");

        }

        // 移动标签文本
        function moveLabel(id, x = 0) {
            if (id) {
                const labelData = computerRoom3DStore.getLabelDataById(id);
                if (labelData) {
                    computerRoom3DStore.setLabelDataById(id, { x: labelData.x + x });
                }
            }
        }

        //打开1号柜1号门
        function openDoor() {
            computerRoom3DStore.openDoor("1", 1);
        }

        //关闭1号柜1号门
        function closeDoor() {
            computerRoom3DStore.closeDoor("1", 1);
        }

        //查看1号柜1号门的开关状态
        function getDoorState() {
            console.log(computerRoom3DStore.getDoorState("1", 1));

        }

        //关闭所有门
        function closeAllDoor() {
            computerRoom3DStore.closeAllDoor();
        }


        // 设置需要隐藏的设备
        function setHides() {
            computerRoom3DStore.setHides("device_of_cabinet", ["1"]);
        }

        // 获取设备的隐藏状态
        function getHide() {
            console.log("设备的隐藏状态", computerRoom3DStore.getHide("device_of_cabinet", "1"));

        }

        //取消设备的隐藏状态
        function cancelHide() {
            computerRoom3DStore.cancelHide("device_of_cabinet", ["1"]);
        }

        //取消全部设备的隐藏状态
        function cancelAllHide() {
            computerRoom3DStore.cancelAllHide();
        }


        //添加线段
        function addLine() {
            const origin = computerRoom3DStore.getLineData();
            //const id = Math.floor(Math.random() * 10000);
            const id = -1;
            console.log("id:" + id)
            //const id = 0;
            origin.push({
                id: id,
                type: "line", // 类型
                width: 4,
                path: [],
                color: "#57D0F4"
            });
            computerRoom3DStore.setLineData(origin);
            // 设置当前编辑的线条
            computerRoom3DStore.setEditorLineId(id);
        }

        //加载线段
        function loadLine() {
            computerRoom3DStore.setLineData([
                {
                    id: "3",
                    type: "line", // 类型
                    width: 4,
                    path: [
                        { x: -350.28394769874757, y: 1811.6255034179687, z: 469.3196078259364 },
                        { x: -101.72765656028673, y: 1811.6255034179687, z: 419.54736532291554 },
                        { x: -143.6416980321468, y: 1811.6255034179687, z: 467.91537126564936 },
                        { x: -266.84602351393903, y: 1811.6255034179687, z: 479.83256253001673 }
                    ],
                    color: "#57D0F4"
                },
                {
                    id: "4",
                    type: "line", // 类型
                    width: 4,
                    path: [
                        { x: -351.58342998711896, y: 1811.6255034179687, z: 221.5979641084882 },
                        { x: -316.1446481156921, y: 1811.6255034179685, z: 388.8342732152214 },
                        { x: 69.73887133813923, y: 1811.6255034179687, z: 459.2425609735899 },
                        { x: 232.0086999220449, y: 1811.6255034179687, z: 451.1594626904657 }
                    ],
                    color: "#f86051"
                },
            ]);
        }

        //获取

        //↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓监听事件↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 


        //机柜数据改变事件
        function cabinetDatasChange(e) {
            console.log('机柜数据有改变', e.detail.cabinetDatas);
        }
        // 监听机柜数据变化
        window.addEventListener("cabinetDatasChange", cabinetDatasChange);
        // 取消监听机柜数据变化
        // window.removeEventListener("cabinetDatasChange", cabinetDatasChange);


        //当前选中的机柜id事件
        function selectCabinetId(e) {
            console.log('当前选中的机柜', e.detail.lookCabinetId);
        }
        //监听当前选中的机柜id
        window.addEventListener("selectCabinetId", selectCabinetId);
        //取消监听当前选中的机柜id
        // window.removeEventListener("selectCabinetId", selectCabinetId);


        //机柜设备数据改变事件
        function cabinetDeviceDatasChange(e) {
            console.log('机柜设备数据有改变', e.detail.cabinetDeviceDatas);
        }
        // 监听机柜数据变化
        window.addEventListener("cabinetDeviceDatasChange", cabinetDeviceDatasChange);
        // 取消监听机柜数据变化
        // window.removeEventListener("cabinetDeviceDatasChange", cabinetDeviceDatasChange);


        //当前选中的机柜设备id事件
        function selectCabinetDeviceId(e) {
            console.log('当前选中的机柜设备', e.detail.lookCabinetDeviceId);
        }
        //监听当前选中的机柜id
        window.addEventListener("selectCabinetDeviceId", selectCabinetDeviceId);
        //取消监听当前选中的机柜id
        // window.removeEventListener("selectCabinetDeviceId", selectCabinetDeviceId);


        //其他设备数据改变事件
        function otherDeviceDatasChange(e) {
            console.log('其他设备数据有改变', e.detail.otherDeviceDatas);
        }
        // 监听机柜数据变化
        window.addEventListener("otherDeviceDatasChange", otherDeviceDatasChange);
        // 取消监听机柜数据变化
        // window.removeEventListener("otherDeviceDatasChange", otherDeviceDatasChange);



        //当前选中的其他设备id事件
        function selectOtherDeviceId(e) {
            console.log('当前选中的其他设备', e.detail.lookOtherDeviceId);
        }
        //监听当前选中的其他设备id
        window.addEventListener("selectOtherDeviceId", selectOtherDeviceId);
        //取消监听当前选中的其他设备id
        // window.removeEventListener("selectOtherDeviceId", selectOtherDeviceId);


        //温度传感器数据改变事件
        function temperatureDatasChange(e) {
            console.log('温度传感器数据有改变', e.detail.temperatureDatas);
        }
        // 监听温度传感器数据变化
        window.addEventListener("temperatureDatasChange", temperatureDatasChange);
        // 取消监听温度传感器数据变化
        // window.removeEventListener("temperatureDatasChange", temperatureDatasChange);


        //当前选中的温度传感器id事件
        function selectTemperatureId(e) {
            console.log('当前选中的温度传感器', e.detail.lookTemperatureId);
        }
        //监听当前选中的温度传感器id
        window.addEventListener("selectTemperatureId", selectTemperatureId);
        //取消监听当前选中的温度传感器id
        // window.removeEventListener("selectTemperatureId", selectTemperatureId);


        //文本弹窗数据改变事件
        function textModalDatasChange(e) {
            console.log('文本弹窗数据有改变', e.detail.textModalDatas);
        }
        // 监听温度传感器数据变化
        window.addEventListener("textModalDatasChange", textModalDatasChange);
        // 取消监听温度传感器数据变化
        // window.removeEventListener("textModalDatasChange", textModalDatasChange);


        //当前选中的文本弹窗id事件
        function selectTextModalId(e) {
            console.log('当前选中的文本弹窗', e.detail.lookTextModalId);
        }
        //监听当前选中的温度传感器id
        window.addEventListener("selectTextModalId", selectTextModalId);
        //取消监听当前选中的温度传感器id
        // window.removeEventListener("selectTextModalId", selectTextModalId);

        //告警点数据改变事件
        function alarmPointDatasChange(e) {
            console.log('告警点数据有改变', e.detail.alarmPointDatas);
        }
        // 监听告警点器数据变化
        window.addEventListener("alarmPointDatasChange", alarmPointDatasChange);
        // 取消监听告警点器数据变化
        // window.removeEventListener("alarmPointDatasChange", alarmPointDatasChange);


        //当前选中的告警点id事件
        function selectAlarmPointId(e) {
            console.log('当前选中的告警点', e.detail.lookAlarmPointId);
        }
        //监听当前选中的告警点id
        window.addEventListener("selectAlarmPointId", selectAlarmPointId);
        //取消监听当前选中的告警点id
        // window.removeEventListener("selectAlarmPointId", selectAlarmPointId);


        //端口点击事件
        function protClick(e) {
            console.log('当前选中的端口号', e.detail.id);
        }
        //端口点击事件
        window.addEventListener("protClick", protClick);
        //端口点击事件
        // window.removeEventListener("protClick", protClick);


        //标签文本数据改变事件
        function labelDatasChange(e) {
            console.log('标签文本数据有改变', e.detail.labelDatas);
        }
        // 监听标签文本数据变化
        window.addEventListener("labelDatasChange", labelDatasChange);
        // 取消监听标签文本器数据变化
        // window.removeEventListener("labelDatasChange", labelDatasChange);


        //当前选中的标签文本id事件
        function selectLabelDatatId(e) {
            const labelData = computerRoom3DStore.getLabelDataById(e.detail.lookLabelId);
            console.log('当前选中的标签文本', labelData);
        }
        //监听当前选中的标签文本id
        window.addEventListener("selectLabelDatatId", selectLabelDatatId);
        //取消监听当前选中的标签文本id
        // window.removeEventListener("selectLabelDatatId", selectLabelDatatId);


    </script>
</head>

<body style="margin: 0;height: 100%">
    <div style="height: 100%" id="computerRoom3D"></div>
    <div id="root"></div>
    <div class="btns">

        <div>
            <button onclick="post()">post请求</button>
            <button onclick="computerRoom3D.showPort(true)">显示端口</button>
            <button onclick="computerRoom3D.showPort(false)">隐藏端口</button>
            <button onclick="computerRoom3DStore.setWallOpacity(1)">设置墙体透明度为1</button>
            <button onclick="computerRoom3DStore.setWallOpacity(0.1)">设置墙体透明度为0.2</button>
        </div>

        <div>
            <button onclick="computerRoom3DStore.setCurrentModel('cabinet')">设备模式</button>
            <button onclick="computerRoom3DStore.setCurrentModel('hot')">热力模式</button>
            <button onclick="computerRoom3DStore.setCurrentModel('portLine')">端口连线模式</button>
            <button onclick="computerRoom3DStore.setCurrentModel('capacity')">容量模式</button>
            <button onclick="computerRoom3DStore.setShadowMapEnabled(true)">阴影开</button>
            <button onclick="computerRoom3DStore.setShadowMapEnabled(false)">阴影关</button>
        </div>
        <div>
            <button onclick="saveCameraParam()">保存相机位置</button>
            <button onclick="setCameraParam()">设置相机位置</button>
            <button onclick="computerRoom3DStore.setCameraLimitPosition(true)">开启相机限位</button>
            <button onclick="computerRoom3DStore.setCameraLimitPosition(false)">关闭相机限位</button>
        </div>

        <div>
            <button onclick="computerRoom3DStore.setCurrentScene('outScene')">主场景</button>
            <button onclick="computerRoom3DStore.setCurrentScene('floors')">楼层</button>
            <button onclick="computerRoom3DStore.setCurrentScene('floor_1')">一楼</button>
            <button onclick="computerRoom3DStore.setCurrentScene('floor_2')">二楼</button>
            <button onclick="computerRoom3DStore.setCurrentScene('floor_3')">三楼</button>
            <button onclick="computerRoom3DStore.setCurrentScene('floor_4')">四楼</button>
            <button onclick="computerRoom3DStore.setCurrentScene('floor_5')">五楼</button>
            <button onclick="computerRoom3DStore.setCurrentScene('floor_6')">六楼</button>
            <button onclick="computerRoom3DStore.setCurrentScene('floor_7')">七楼</button>
            <button onclick="add()">添加机柜</button>
            <button onclick="del()">删除机柜</button>
            <button onclick="setCabinetPosition()">移动机柜</button>
            <button onclick="computerRoom3DStore.setLookCabinetId('1')">选中机柜1</button>
            <button onclick="computerRoom3DStore.setLookCabinetId('')">取消选中机柜</button>
            <button onclick="computerRoom3D.lookCabinet('1')">查看机柜1</button>
        </div>

        <div>
            <button onclick="openDoor()">打开1号柜1号门</button>
            <button onclick="closeDoor()">关闭1号柜1号门</button>
            <button onclick="getDoorState()">查看1号柜1号门的开关状态</button>
            <button onclick="closeAllDoor()">关闭所有门</button>
        </div>

        <div>
            <button onclick="setCabinetDeviceDatas()">设置机柜内的设备</button>
            <button onclick="computerRoom3DStore.setLookCabinetDeviceId('1','#f86051')">选中机柜设备1_1</button>
            <button onclick="computerRoom3DStore.setLookCabinetDeviceId('2','#f86051')">选中机柜设备1_2</button>
            <button onclick="moveCabinetDevice(1)">上移选中机柜</button>
            <button onclick="moveCabinetDevice(-1)">下移选中机柜</button>
            <button onclick="computerRoom3DStore.setLookCabinetDeviceId('')">取消选中机柜设备</button>
            <button onclick="computerRoom3D.lookCabinetDevice('1')">查看机柜设备1_1</button>
        </div>
        <div>
            <button onclick="addTemperature()">添加温度传感器</button>
            <button onclick="moveTemperature('1', 10)">移动温度传感器</button>
            <button onclick="computerRoom3DStore.setLookTemperatureId('1')">选中温度传感器</button>
            <button onclick="computerRoom3DStore.setLookTemperatureId('')">取消选中温度传感器</button>
            <button onclick="computerRoom3DStore.setHoverTemperatureId('1')">高亮温度传感器</button>
            <button onclick="computerRoom3DStore.setHoverTemperatureId('')">取消高亮温度传感器</button>
            <button onclick="computerRoom3DStore.setShowTemperature(true)">显示温度传感器</button>
            <button onclick="computerRoom3DStore.setShowTemperature(false)">隐藏温度传感器</button>
        </div>
        <div>
            <button onclick="addOtherDevices()">添加其他设备</button>
            <button onclick="moveOtherDevices('10', 10)">移动其他设备</button>
            <button onclick="computerRoom3DStore.setLookOtherDeviceId('10')">选中其他设备</button>
            <button onclick="computerRoom3DStore.setLookOtherDeviceId('')">取消选中其他设备</button>
        </div>
        <div>
            <button onclick="addTextModal()">添加文本弹窗</button>
            <button onclick="moveTextModal('1', 10)">移动文本弹窗</button>
            <button onclick="computerRoom3DStore.setLooktextModalId('1')">选中文本弹窗</button>
            <button onclick="computerRoom3DStore.setLooktextModalId('')">取消选中文本弹窗</button>
        </div>
        <div>
            <button onclick="addAlarmPoint()">添加告警点</button>
            <button onclick="moveAlarmPoint('1', 10)">移动告警点</button>
            <button onclick="computerRoom3DStore.setLookAlarmPointDataId('1')">选中告警点</button>
            <button onclick="computerRoom3DStore.setLookAlarmPointDataId('')">取消选中告警点</button>
        </div>
        <div>
            <button onclick="addLabel()">添加标签文本</button>
            <button onclick="moveLabel('1', 10)">移动标签文本</button>
            <button onclick="computerRoom3DStore.setLookLabelId('1')">选中标签文本</button>
            <button onclick="computerRoom3DStore.setLookLabelId('')">取消选中标签文本</button>
        </div>
        <div>
            <button onclick="setPortLineData()">设置端口线数据</button>
            <button onclick="removeProtLineData()">取消端口线数据</button>
        </div>
        <div>
            <button onclick="setHides()">设置需要隐藏的设备</button>
            <button onclick="getHide()">获取设备的隐藏状态</button>
            <button onclick="cancelHide()">取消设备的隐藏状态</button>
            <button onclick="cancelAllHide()">取消全部设备的隐藏状态</button>
        </div>
        <div>
            <button onclick="addLine()">添加线段</button>
            <button onclick="loadLine()">加载线段</button>
        </div>
    </div>
    <script type="module" src="/src/main.tsx"></script>
</body>
</html>